<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ljl</title>
  <script src="vue.js"></script>
  <script src="vuex.js"></script>
</head>
<body>
<div id="app">
  <h3>人员列表查询</h3>
  <input type="text" v-model="text">
  <button @click="search">查询</button>
  <p>查询结果：{{ this.$store.getters.search }}</p>
  <ul>
    <li v-for="item in this.$store.state.peopleList">{{ item }}</li>
  </ul>
</div>
<script>
  const store = new Vuex.Store({
    state: {
      peopleList:
	  [
        { id: 1, name: '张珊' },
        { id: 2, name: '李斯' },
        { id: 3, name: '王武' },
        { id: 4, name: '赵顺' },
        // 此处可以添加更多数据...
      ],
      text: '张珊'
    },
    mutations: {
      search (state, text) {
        state.text = text
      }
    },
    getters: {
      search: state => {
        return state.peopleList.filter(people => people.name == state.text)
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data: { text: '' },
    store,
    methods: {
      search () {
        this.$store.commit('search', this.text)
      }
    }
  })
</script>
</body>
</html>